<template>
  <div>
    <el-card>
      <PageTools :show-before="(showBefore = false)">
        <template v-slot:after>
          <el-button
            v-if="checkPerm('addpermissionsmenus')"
            type="primary"
            @click="addPermission"
          >添加菜单权限</el-button>
        </template>
      </PageTools>

      <el-table
        :data="PermissionList"
        border
        style="width: 100%"
        row-key="id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column fixed prop="title" label="权限名称" width="250%" />
        <el-table-column prop="code" label="权限标识" width="250%" />
        <el-table-column prop="description" label="权限描述" width="320%" />
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          type="flex"
          justify="end"
        >
          <template v-slot="{ row }">
            <!-- 编辑按钮 -->
            <el-button
              v-if="checkPerm('editpermission')"
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
              @click="editPermissionsFn(row)"
            />
            <!-- 删除按钮 -->
            <el-button
              v-if="checkPerm('delpermission')"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="removePermissionsFn(row)"
            />
            <!-- 新增子权限按钮 -->
            <el-button
              v-show="checkPerm('addpermissionpoint')"
              v-if="row.type !== '2'"
              type="primary"
              round
              size="small"
              @click="handleClick(row)"
            >添加按钮权限</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <!-- <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        @current-change="handleCurrentChange"
      /> -->
    </el-card>
    <DialogPermissions
      ref="DialogForm"
      :dialog-form-visible.sync="dialogFormVisible"
      @confirmFn="confirmFn"
      @updataFnPermissionList="getPermissionsList()"
    />
  </div>
</template>

<script>
import {
  getPermissionsList,
  getPermissionscount,
  removePermissions
} from '@/api/permissions'
import DialogPermissions from './components/dialog.vue'
export default {
  name: 'Permission',
  components: {
    DialogPermissions
  },
  data() {
    return {
      showBefore: '', // 头部组件变量
      dialogFormVisible: false, // 弹框显示隐藏变量
      page: 1, // 页码
      total: 0, // 列表数量
      size: 30, // 单页列表数量
      PermissionList: [], // 权限渲染列表----递归数据
      PermissionList2: [], // 权限列表 --- 平级数据
      formData: {
        id: '',
        title: '',
        code: '',
        description: '',
        pid: '',
        type: '',
        created_at: '',
        updated_at: ''
      }
    }
  },
  created() {
    this.getPermissionsList()
    this.getPermissionscount()
  },
  methods: {
    // 编辑权限函数--呼出弹框
    async editPermissionsFn(row) {
      await this.$refs.DialogForm.getPermissionsById(row.id)
      this.$refs.DialogForm.title = '编辑权限'
      this.dialogFormVisible = true
    },
    // 删除权限函数
    async removePermissionsFn(row) {
      try {
        await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.$message.success('删除成功')
        await removePermissions(row.id)
        this.getPermissionsList()
      } catch (error) {
        this.$message.error('取消删除')
      }
    },
    // 添加子权限按钮
    handleClick(row) {
      this.formData.pid = row.id
      this.formData.type = '2'
      this.$refs.DialogForm.title = '新增按钮权限'
      this.dialogFormVisible = true
    },
    // 添加父权限
    addPermission() {
      this.formData.pid = '0'
      this.formData.type = '1'
      this.$refs.DialogForm.title = '新增菜单权限'
      this.dialogFormVisible = true
    },
    // 渲染权限列表
    async getPermissionsList() {
      const res = await getPermissionsList({
        _limit: 10000,
        _start: (this.page - 1) * this.size
      })
      this.PermissionList = this.PermissionscountTree(res.data, '0')
      this.PermissionList2 = res.data
      // console.log(this.PermissionList2)
    },
    // 转树形结构的递归函数
    PermissionscountTree(data, id) {
      const arr = []
      data.forEach((item) => {
        if (item.pid === id + '') {
          item.children = this.PermissionscountTree(data, item.id)
          arr.push(item)
        }
      })
      return arr
    },
    // 获取权限数量
    async getPermissionscount() {
      const res = await getPermissionscount()
      this.total = res.data
    },
    // 分页器
    // handleCurrentChange(count) {
    //   this.page = count
    //   this.getPermissionsList()
    // },
    // 弹框表单确认按钮
    async confirmFn(data) {
      if (data.id) {
        await this.$refs.DialogForm.editPermissions(data)
      } else {
        data.pid = String(this.formData.pid)
        data.type = String(this.formData.type)
        await this.$refs.DialogForm.addPermissions(data)
      }
      this.$refs.DialogForm.closeFn()
    }
  }
}
</script>

<style>
</style>
